<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>向上管理工具：高效申请资源SOP</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入图标库 -->
    <script src="https://unpkg.com/lucide@latest"></script>
    <!-- 引入您指定的字体 -->
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&family=Source+Han+Sans+CN:wght@300;400;700&display=swap" rel="stylesheet">
    
    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        // 沿用您模板中的颜色定义
                        primary: '#3B82F6', // 主蓝色
                        secondary: '#10B981', // 次要绿色
                        'highlight-bg': '#EFF6FF', // 浅蓝高亮背景
                        'highlight-text': '#1E40AF', // 深蓝高亮文字
                    }
                }
            }
        }
    </script>
    
    <!-- 样式：沿用您模板中的杂志风格 -->
    <style>
        :root {
            --theme-primary: #3B82F6;
            --theme-secondary: #10B981;
            --highlight-bg: #EFF6FF;
            --highlight-text: #1E40AF;
        }
        /* 沿用您模板中的字体定义 */
        body {
            font-family: 'Source Han Sans CN', sans-serif;
            font-weight: 300;
        }
        h1, h2, h3, blockquote {
            font-family: 'Noto Serif SC', serif;
        }
        /* 沿用您模板中的杂志页面布局 */
        .magazine-page {
            width: 700px; /* 您模板中的固定宽度 */
            background: #fefefe;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            min-height: auto;
        }
        .dark .magazine-page {
            background: #111827; /* 暗色模式背景 */
        }
        .dark p, .dark label, .dark span {
            color: #d1d5db;
        }
        .dark h1, .dark h2, .dark h3 {
            color: #f9fafb;
        }
        .breathing-space {
            letter-spacing: 0.05em;
            line-height: 1.8;
        }

        /* 针对工具表单的样式优化 */
        .form-group label {
            display: block;
            font-family: 'Noto Serif SC', serif; /* 标题使用衬线体 */
            font-size: 1.1em;
            font-weight: 700;
            margin-bottom: 10px;
            color: var(--theme-primary); /* 标签使用主题蓝色 */
        }
        .form-group label span {
            font-family: 'Source Han Sans CN', sans-serif; /* 描述使用非衬线体 */
            font-weight: 400;
            font-size: 0.9em;
            color: #555;
            display: block;
            margin-top: 4px;
        }
        .dark .form-group label span {
            color: #aaa;
        }
        textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 1em;
            line-height: 1.5;
            font-family: 'Source Han Sans CN', sans-serif;
            min-height: 100px;
            resize: vertical;
            transition: border-color 0.3s, box-shadow 0.3s;
        }
        textarea:focus {
            border-color: var(--theme-primary);
            box-shadow: 0 0 8px rgba(59, 130, 246, 0.2);
            outline: none;
        }
        .dark textarea {
            background-color: #374151;
            border-color: #4b5563;
            color: #f3f4f6;
        }
        /* 按钮样式 */
        button {
            background: linear-gradient(90deg, var(--theme-primary), var(--theme-secondary));
            color: white;
            border: none;
            padding: 12px 30px;
            font-size: 1.1em;
            font-weight: 600;
            font-family: 'Source Han Sans CN', sans-serif;
            border-radius: 50px;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        button:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(59, 130, 246, 0.3);
        }
        /* 汇总结果样式 */
        #summary {
            background-color: var(--highlight-bg); /* 高亮背景 */
            border-left: 4px solid var(--theme-primary);
            padding: 20px;
            border-radius: 8px;
            display: none; /* 默认隐藏 */
        }
        .dark #summary {
             background-color: #1f2937;
             border-left-color: var(--theme-primary);
        }
        #summary h3 {
            color: var(--highlight-text);
            font-weight: 700;
        }
        .dark #summary h3 {
            color: var(--theme-primary);
        }
        #summary pre {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            white-space: pre-wrap; /* 自动换行 */
            word-wrap: break-word;
            font-size: 0.95em;
            line-height: 1.7;
            border: 1px solid #e5e7eb;
            font-family: 'Source Han Sans CN', sans-serif;
        }
        .dark #summary pre {
            background-color: #374151;
            border-color: #4b5563;
            color: #f3f4f6;
        }
    </style>
</head>
<body class="bg-gray-200 dark:bg-gray-800 flex items-center justify-center min-h-screen p-4 md:p-8">

    <!-- 沿用您模板中的杂志页面布局 -->
    <article class="magazine-page shadow-2xl p-16">

        <!-- 页面头部 -->
        <header class="mb-8">
            <h1 class="text-3xl font-bold leading-tight mb-2 relative">
                <!-- 标志性的左侧竖线 -->
                <span class="absolute left-0 -top-2 bottom-2 w-1.5 bg-primary rounded-full"></span>
                <!-- 通用场景标题，唤起用户欲望 -->
                <span class="ml-6">向上管理：申请资源话术SOP工具</span>
            </h1>
            <p class="text-lg text-gray-600 dark:text-gray-400 font-light ml-6">如何高效申请资源 (RIDE 模型)</p>
        </header>

        <!-- 工具描述 -->
        <section class="mb-8">
            <blockquote class="border-l-4 border-secondary bg-highlight-bg dark:bg-gray-900/50 p-6 rounded-r-lg text-gray-700 dark:text-gray-300 breathing-space">
                师傅说：“找领导要资源，不能只说‘我需要’，要说‘项目需要’。把你的需求和团队的风险与收益绑定，他才会把资源高高兴兴地给你。”
            </blockquote>
        </section>

        <!-- 交互式表单区域 -->
        <section class="form-section space-y-8">
            <div class="form-group">
                <label for="risk">
                    (R) 风险: 明确不给资源的风险
                    <span>师傅心法：别只说“我需要”，要先说“项目会怎样”。</span>
                </label>
                <textarea id="risk" placeholder="例如：如果项目延期，我们将错失Q4的市场窗口，竞品会反超..."></textarea>
            </div>

            <div class="form-group">
                <label for="interest">
                    (I) 利益: 阐明追加资源的好处
                    <span>师傅心法：告诉他，给他这1块钱，你能帮他挣回10块钱。</span>
                </label>
                <textarea id="interest" placeholder="例如：如果我们能提前上线，就能拿下XX标杆客户，这对您今年的KPI至关重要..."></textarea>
            </div>

            <div class="form-group">
                <label for="differences">
                    (D) 差异: 提出你的独特方案
                    <span>师傅心法：证明你不是在“要饭”，而是在提供“最优解”。</span>
                </label>
                <textarea id="differences" placeholder="例如：我也想过B方案(如外包)，但它质量不可控。我的A方案(即申请资源)虽然前期投入，但能保证质量和数据安全..."></textarea>
            </div>

            <div class="form-group">
                <label for="effect">
                    (E) 影响: 消除领导的最后顾虑
                    <span>师傅心法：告诉他，你已经想好了万一失败的预案。</span>
                </label>
                <textarea id="effect" placeholder="例如：我知道您担心投入没效果。我会在第一周结束时给您一个数据反馈，如果数据不行，我们立刻停止投入..."></textarea>
            </div>
        </section>

        <!-- 按钮容器 -->
        <div class="button-container text-center my-8">
            <button onclick="generateScript()">一键生成我的沟通脚本</button>
        </div>

        <!-- 汇总结果区域 -->
        <section id="summary" class="mt-8">
            <h3 class="text-xl font-bold mb-4">您的专属沟通脚本 (可直接复制)</h3>
            <pre id="script-output">
                <!-- 汇总内容将显示在这里 -->
            </pre>
        </section>

        <!-- 页面底部信息 -->
        <div class="flex items-center text-secondary mt-12 pt-6 border-t border-gray-200 dark:border-gray-700">
            <i data-lucide="check-circle" class="w-5 h-5 mr-2"></i>
            <span>SOP 工具 · 高效申请资源</span>
        </div>

    </article>

    <script>
        // 激活图标库
        lucide.createIcons();

        // 交互功能JavaScript
        function generateScript() {
            // 1. 获取用户填写的内容
            const risk = document.getElementById('risk').value.trim();
            const interest = document.getElementById('interest').value.trim();
            const differences = document.getElementById('differences').value.trim();
            const effect = document.getElementById('effect').value.trim();

            // 2. 检查是否都填写了
            if (!risk || !interest || !differences || !effect) {
                // 使用自定义的提示框代替alert()
                showCustomAlert("请填写所有模块，以便生成最有效的脚本。");
                return;
            }

            // 3. 汇总生成脚本
            const script = `
领导您好，关于[请填写项目名称]，我有一个重要的进展想和您同步：

(抛出风险)
我们目前在[请填写具体环节]遇到困难。我分析过，如果不投入[请填写具体资源]，最大的风险是：
${risk}

(阐明利益)
但反过来，如果我们能获得[请填写具体资源]，我们不仅能实现：
${interest}

(提供方案)
我也想过其他方案，但它们都有弊端。我建议的方案（即申请资源）是最高效的，因为它：
${differences}

(消除顾虑)
我知道您可能担心[请填写领导顾虑]。我的规避方案是：
${effect}

您看这个方案是否可行？
            `;

            // 4. 显示汇总结果
            document.getElementById('script-output').textContent = script.trim();
            const summaryEl = document.getElementById('summary');
            summaryEl.style.display = 'block';
            
            // 滚动到结果区域
            summaryEl.scrollIntoView({ behavior: 'smooth' });
        }

        // 自定义提示框 (避免使用alert)
        function showCustomAlert(message) {
            let alertBox = document.getElementById('custom-alert');
            if (!alertBox) {
                alertBox = document.createElement('div');
                alertBox.id = 'custom-alert';
                alertBox.style.position = 'fixed';
                alertBox.style.top = '20px';
                alertBox.style.left = '50%';
                alertBox.style.transform = 'translateX(-50%)';
                alertBox.style.padding = '12px 20px';
                alertBox.style.background = '#f8d7da';
                alertBox.style.color = '#721c24';
                alertBox.style.borderColor = '#f5c6cb';
                alertBox.style.border = '1px solid';
                alertBox.style.borderRadius = '8px';
                alertBox.style.zIndex = '1000';
                alertBox.style.boxShadow = '0 4px 12px rgba(0,0,0,0.1)';
                document.body.appendChild(alertBox);
            }
            alertBox.textContent = message;
            alertBox.style.display = 'block';
            setTimeout(() => {
                alertBox.style.display = 'none';
            }, 3000);
        }
    </script>
</body>
</html>
